<template>
  <div>
    {{ hello }}
    {{ number }}
    {{ myValue }}
    <button @click="emitMyEvent">emit</button><br/>
    <!-- 插槽 -->
    <!-- <slot>no slot</slot> -->
    <!-- 通过声明 有名字的插槽 用与父类插入指定的位置-->
    <slot name='header'> no header</slot><br/>
    <slot></slot><br/>
    <slot name='footer'> no footer</slot><br/>
  </div>
</template>

<script>
export default {
  props: {
    'my-value': [Number, String]
  },
  // props: ['my-value'],
  data () {
    return {
      hello: 'i am component b'
    }
  },
  methods: {
    emitMyEvent () {
      // 像父级返回事件
      this.$emit('my-event', this.hello)
    }
  }
}
</script>
